<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-08-20 11:53:31
 * @LastEditTime: 2019-09-19 17:33:02
 * @LastEditors: Please set LastEditors
 -->
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
    <div class="row">
        <div class="portlet-title">
            <legend>漏斗图数据配置</legend>
        </div>
        <!-- 图表类型 -->
        <f:form.hidden name="datas[charttype]" value="funnel" />
        <div class="col-md-7">
            <div class="col-md-12">
                <div id="realTimeInvoke" class="chart" style="height: 450px; width: 100%"></div>
                <f:render partial="Demo/Funnel" arguments="{_all}" />
            </div>
        </div>
        <div class="col-md-5">
            <div class="form-group">
                <label for="title" class="control-label">系列名称</label>
                <f:form.textfield name="datas[name]" class="form-control" placeholder="请填写系列名称" value="{name}" />
            </div>
            <div class="form-group">
                <label for="theme" class="control-label">图表显示数据<small> <a href="#demoModal" data-toggle="modal"
                            data-target="#demoModal"> 【<i class="fa fa-adjust"></i>查看示例】</a></small></label>
                <table class="table table-bordered">
                    <thead>
                        <tr>
                            <th width="12%" class="text-center">序号</th>
                            <th width="40%">数据类别</th>
                            <th width="30%">数据(数字)</th>
                            <th width="10%" class="text-center">操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <f:if condition="{datas}">
                            <f:then>
                                <f:for each="{datas}" as="vo" iteration="item">
                                    <tr>
                                        <td><input type="text" class="no-border form-control" value="{item.cycle}" readonly /></td>
                                        <td><f:form.textfield class="no-border form-control" name="datas[axis][]" value="{vo.name}" /></td>
                                        <td><f:form.textfield class="no-border form-control" name="datas[value][]" value="{vo.value}" /></td>
                                        <td align="center"><button class="btn btn-danger add-input" onclick="delOneDom(this);return false;"><i class="fa fa-times"></i></button></td>
                                    </tr>
                                </f:for>
                            </f:then>
                            <f:else>
                                <tr>
                                    <td><input type="text" class="no-border form-control" readonly value="1" /></td>
                                    <td><f:form.textfield class="no-border form-control" name="datas[axis][]" /></td>
                                    <td><f:form.textfield class="no-border form-control" name="datas[value][]" /></td>
                                    <td align="center"><button class="btn btn-danger add-input" onclick="delOneDom(this,'new');return false;"><i class="fa fa-times"></i></button></td>
                                </tr>
                            </f:else>
                        </f:if>
                        <tr>
                            <td colspan="3"></td>
                            <td align="center"><button class="btn btn-default add-input" onclick="addOneDom(this);return false;"><i class="fa fa-plus"></i></button></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="modal fade" id="demoModal" tabindex="-1" role="dialog" aria-labelledby="demoModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="demoModalLabel">数据添加示例</h4>
                </div>
                <div class="modal-body">
                    <img src="{f:uri.resource(path:'Echarts/Picture/funnel.png')}"
                        style="margin-top: 10px;width: 100%;cursor: pointer;">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>

</html>